<!doctype html>
<html><head>
	<meta charset="utf-8">
	<title>[(${dto.menu.title})]</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- ysui-->
	<link rel="stylesheet" href="/static/plugins/ysui/1.0.0/css/ysui.css" media="all">
	
	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js?v=a"></script>
	<link rel="stylesheet" href="/static/admin/css/mini-ease.css" media="all" />
	
	<!-- iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />
</head>
<body>
	
	<div class="ysui-row">
		<!-- 左边面板【start】 -->
		<div class="layui-col-md10">
			<div class="layui-panel" style="overflow: auto;">
				<div class="mid-content">
					
					<table class="layui-hide" id="main_table" lay-filter="main_table"></table>
	
	<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<a th:each="button : ${dto.toolbar.buttonArr}" class="layui-btn layui-btn-normal layui-btn-xs" th:lay-event="${button.event}"><i class="iconfont" th:classappend="${button.icon}"></i>[(${button.name})]</a>
	</div>
	</script>
	
	<!-- 引用字段TPL自定义脚本 -->
	<th:block th:include="include/gird-tpl :: TPLScript"/>
					
					<script th:inline="javascript">
					layui
						.extend({optimizeSelectOption: '/static/plugins/layui/extends/optimizeSelectOption/optimizeSelectOption'})
						//.use(['form', 'element', 'table', 'dropdown', 'optimizeSelectOption', 'util', 'laydate'], function(){
						.use(['form', 'element', 'table', 'dropdown', 'optimizeSelectOption', 'util', 'laydate'], function(){
						var element = layui.element;
						var table = layui.table;
						var dropdown = layui.dropdown;
						var form = layui.form;
						var util = layui.util;
						var $ = layui.jquery;
						var laydate = layui.laydate;
						
						// 创建渲染实例
						table.render({
							elem: '#main_table'
							,url:'[(${dto.menu.pathGridRequest})]' // 此处为静态模拟数据，实际使用时需换成真实接口
							,toolbar: '#toolbarDemo'
							,defaultToolbar: ['filter', {
									title: '刷新页面'
									,layEvent: 'LAYTABLE_REFRESH'
									,icon: 'layui-icon-refresh'
								}]
							,height: window.innerHeight - 40 // 最大高度减去其他容器已占有的高度差
							,limit : 50
							,limits : [50,100,200,500]
							,where: getConds()
							,cellMinWidth: 95
							,totalRow: true // 开启合计行，true开启，false关闭
							,page: true
							,request: {
								pageName: 'page',
								limitName: 'size'
							}
							,skin: 'row'
							,even: true // 开启隔行背景
							,totalRow: true
							,cols: [ 
								[(${dto.colGrids})]
							 ]
							,done: function(res){
								console.log(res);
								var id = this.id;
					            
								// 文本框编辑事件
								$('input[lay-filter="_input_filter_text_on_table"]').on('change',function (e) {
									var value = $(this).val();
								    var tdElem = $(this).closest('td');
								    var trElem = tdElem.closest('tr');
								    var tableView = trElem.closest('.layui-table-view');
								    table.cache['main_table'][trElem.data('index')][tdElem.data('field')] = value;
									
									var dataCommit = {};
									dataCommit['[(${dto.primaryKey})]'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['[(${dto.primaryKey})]'];
									dataCommit[tdElem.data('field')] = value;
									doEditOnTable(dataCommit);
									return;
								});
								
								// 绑定选择框(转换)的值变化提交事件
								form.on('switch(_input_filter_checkbox_on_table)', function(data){
									//layer.tips(this.value + ' ' + this.name + '：'+ data.elem.checked, data.othis);
								    var value = this.checked ? 1 : 0;
								    modifyTableCacheBySwitch(data, value);
								});
								
								// 绑定选择框(下拉)的值变化提交事件
								form.on('select(_input_filter_selector_on_table)', function (data) {
								    console.log("data->>>>>>>>>>>>>>>>", data);
								    var selectElem = $(data.elem);
								    var tdElem = selectElem.closest('td');
								    var trElem = tdElem.closest('tr');
								    var tableView = trElem.closest('.layui-table-view');
								    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;
									
								    var dataCommit = {};
									dataCommit['[(${dto.primaryKey})]'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['[(${dto.primaryKey})]'];
									dataCommit[tdElem.data('field')] = data.value;
									doEditOnTable(dataCommit);
								});


							}
							,error: function(res, msg){
								console.log(res, msg)
							}
						});

						// 绑定查询按钮--表格重载成功后
						$('#id_filter_form_search').on('click', function(e){
							reloadTableOfList();
						});

						//触发单元格工具事件
						table.on('tool(main_table)', function(obj){ // 双击 toolDouble
							var data = obj.data;
							//console.log(obj)
							if(obj.event === 'del'){
								layer.confirm('真的删除行么', function(index){
									obj.del();
									layer.close(index);
								});
							} else if(obj.event === 'edit'){
								layer.open({
									title: '编辑',
									type: 1,
									area: ['80%','80%'],
									content: '<div style="padding: 16px;">自定义表单元素</div>'
								});
							}
							/*
							else if(obj.event === '_event_text_change_on_table'){
								$(this).on('change',function(e){
									var val = $(this).val();
									var name = $(this).attr('name');
									data[name] = val
									obj.update(data);//更新行对象数据
									layer.msg(val);
									console.log(obj + val);
								})
								return;
							}
							*/
						});
						
						//触发表格复选框选择
						table.on('checkbox(main_table)', function(obj){
							console.log(obj)
						});
						 
						//触发表格单选框选择
						table.on('radio(main_table)', function(obj){
							console.log(obj)
						});
						
						// 行单击事件
						table.on('row(main_table)', function(obj){
							//console.log(obj);
							//layer.closeAll('tips');
						});
						// 行双击事件
						table.on('rowDouble(main_table)', function(obj){
							console.log(obj);
						});
						 
						// 单元格编辑事件
						table.on('edit(main_table)', function(obj){
							console.log(obj);
							var field = obj.field //得到字段
							,value = obj.value //得到修改后的值
							,data = obj.data; //得到所在行所有键值
							
							var update = {};
							update[field] = value;
							obj.update(update);
							
							var dataCommit = {};
							dataCommit['[(${dto.primaryKey})]'] = data.[(${dto.primaryKey})];
							dataCommit[field] = value;
							
							doEditOnTable(dataCommit);
						});
						
						//行单击事件（双击事件为：rowDouble）
						table.on('rowDouble(main_table)', function(obj){
							var data = obj.data;
							if ("[(${dto.menuId})]" == '81'){
								window.top.xadmin.add_tab("财务事件明细","/indexCommonOfMenu?menuId=82");
							}else {
								layer.alert(JSON.stringify(data), {
									title: '当前行数据：'
								});
							}

							
							//标注选中样式
							obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
						});
					
						// 更新table的cache
						function modifyTableCacheBySwitch(data, value) {
						    var table = layui.table;
						    var switchElem = $(data.elem);
						    var tdElem = switchElem.closest('td');
						    var trElem = tdElem.closest('tr');
						    var tableView = trElem.closest('.layui-table-view');
						    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = value;
							
							var dataCommit = {};
							dataCommit['[(${dto.primaryKey})]'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['[(${dto.primaryKey})]'];
							dataCommit[tdElem.data('field')] = value;
							doEditOnTable(dataCommit);
						}

						// 清空按钮
						$('#id_filter_form_clear').on('click', function(e){
							layer.confirm("确定清空搜索条件吗？",{
								btn: ['确定', '取消']
							}, function (index) {
								$('form[name="searchForm"]').find('input[type=text],select').each(function() {
									$(this).val('');
								});
								layer.close(index);
							});
							return false;
						});
						
						//初始化搜索框-日期限定一个月
						lay('.bo-search-field-yyyymm[cond-range-type="t_system"]').each(function(){
							var myDate = new Date();
							var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1);
							laydate.render({
								elem: this
								, type: 'month'
								, format: 'yyyy-MM'
								, max: maxtime
								//, max: maxtime//设置选择最大时间为当前
								, calendar: true
								, btns: ['clear', 'confirm', 'now']
								, done: function (value, date) {
									//这里时选中后触发事件
									//value是选中的值
									var time = value;
								}
							});
						});
						
						//初始化搜索框-月范围
						lay('.bo-search-field-yyyymm[cond-range-type="t_between"]').each(function(){
							var myDate = new Date();
							var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1);
							laydate.render({
								elem: this
								, type: 'month'
								, format: 'yyyy-MM'
								, range: '~'
								, max: maxtime
								//, max: maxtime//设置选择最大时间为当前
								, calendar: true
								, btns: ['clear', 'confirm', 'now']
								, done: function (value, date) {
									//这里时选中后触发事件
									//value是选中的值
									var time = value;
								}
							});
						});
						
						//初始化搜索框-日期限定一天
						lay('.bo-search-field-date[cond-range-type="t_system"]').each(function(){
							var myDate = new Date();
							var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate());
							laydate.render({
								elem: this
								, type: 'date'
								, max: maxtime
								//, max: maxtime//设置选择最大时间为当前
								, calendar: true
								, btns: ['clear', 'confirm', 'now']
								, done: function (value, date) {
									//这里时选中后触发事件
									//value是选中的值
									var time = value;
								}
							});
						});
						
						//初始化搜索框-日期范围
						lay('.bo-search-field-date[cond-range-type="t_between"]').each(function(){
							var myDate = new Date();
							var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate());
							laydate.render({
								elem: this
								, type: 'date'
								, max: maxtime
								, range: '~'
								//, max: maxtime//设置选择最大时间为当前
								, calendar: true
								, btns: ['clear', 'confirm', 'now']
								, done: function (value, date) {
									//这里时选中后触发事件
									//value是选中的值
									var time = value;
								}
							});
						});
						
						//初始化搜索框-日期时间范围
						lay('.bo-search-field-datetime').each(function(){
							var myDate = new Date();
							var maxtime = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + (myDate.getDate()) + " 23:59:59";
							laydate.render({
								elem: this
								, type: 'datetime'
								, max: maxtime
								, range: '~'
								//, max: maxtime//设置选择最大时间为当前
								, calendar: true
								, btns: ['clear', 'confirm', 'now']
								, done: function (value, date) {
									//这里时选中后触发事件
									//value是选中的值
									var time = value;
								}
							});
						});
						
						//初始化搜索框-年份
						lay('.bo-search-field-year').each(function(){
							laydate.render({
								elem: this
								, type: 'year'
								//, max: maxtime//设置选择最大时间为当前
								, calendar: false
								, btns: ['clear', 'confirm']
								, done: function (value, date) {
									//这里时选中后触发事件
									//value是选中的值
									var time = value;
								}
							});
						});
					});
					
					// 在表格上修改
					function doEditOnTable(dataCommit) {
						var indexOfLoading = layer.load(1, {
							shade: [0.5,'#000000'] //0.1透明度的白色背景
						});
						$.post('[(${dto.menu.pathGridEditRequest})]', dataCommit, function(res){
							if (res.code == 0) {
								layer.msg(res.msg);
								layer.close(indexOfLoading);
							} else {
								layer.close(indexOfLoading);
								layer.msg(res.msg);
							}
						});
					}
					
					function showModal(colId) {
		            	var w=($(window).width()*0.9);
		            	var h=($(window).height() - 50);
		                layer.open({
		                    type: 2,
		                    area: [w+'px', h +'px'],
		                    fix: true,
		                    maxmin: false,
		                    shadeClose: true,
		                    shade:0.4,
		                    title: "选择",
		                    content: '/toModalSelector?colId=' + colId + '&type=2'
		                });
					}
					
					// 
					$('body').on("mouseenter",".layui-table-body tr",function () {
					    $(this).siblings().find("div").css("color","#142A48");
					    $(this).find("div").css("color","#4DA1FF");
					})
					</script>
				</div>
			</div>
		</div>
	
		<!-- 引用按钮自定义脚本 -->
		<th:block th:with="menuId=${dto.menuId}" th:include="include/gird-btn :: BTNScript(menuId)"/>
		
		<!-- 左边面板【end】 -->
		
		<!-- 搜索面板【start】 -->
		<div id="id_form_search" class="layui-col-md2 search-panel">
			<div class="search-top" style="background: rgb(0, 135, 250);">
				<a data-id="icon-to-hide" href="javascript:;" onclick="hideSearch();">
					<i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible" style="color: #fff;"></i>
					<span style="color: white; margin-left: 100px;">搜索条件</span>
				</a>
				<a data-id="icon-to-show" href="javascript:;" onclick="showSearch();">
					<i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible" style="color: #fff;"></i>
				</a>
			</div>
			<form class="layui-form margin_0" name="searchForm" style="padding: 0.2rem; width: 290px;">
				<div class="layui-form-item margin_0">
					<div class="layui-inline layui-col-xs12 margin_0" th:each="condition : ${dto.conditions}" style="margin-right: 0px;">
						<input th:if="${condition.type} eq 't_hidden'" th:name="${condition.code}" type="hidden" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class="bo-search-field">
						<div th:if="${condition.type} eq 't_text'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_monthly'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-yyyymm" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_date'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-date" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_datetime'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-datetime" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_year'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-year" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_buttontext'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:data-id-field-value="${condition.id}" type="hidden" th:name="${condition.code}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class="bo-search-field">
								<input th:data-id-field-name="${condition.id}" type="text" th:placeholder="${condition.placeHolder}" autocomplete="off" class="height_24 layui-input" value="" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;" readonly="readonly">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';this.previousSibling.previousSibling.previousSibling.previousSibling.value = '';"></i>
								<i style="position: relative; right: 40px;" class="layui-icon layui-icon-more" th:onclick="showModal('[(${condition.id})]')"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_dropdown'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<select th:name="${condition.code}" class="bo-search-field-selector" th:cond-range-type="${condition.rangeType}">
									<option th:each="option: ${condition.optionArr}" th:value="${option.value}" th:text="${option.name}"></option>
								</select>
							</div>
						</div>
					</div>
				</div>
				<div style="width:100%; text-align: center;">
					<a id="id_filter_form_search" class="layui-btn layui-btn-normal layui-btn-xs search_btn"><i class="layui-icon layui-icon-search"></i> 查询</a>
					<button id="id_filter_form_clear" type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-filter="filter_form_search_clear"><i class="layui-icon layui-icon-close"></i> 清空</button>
				</div>
			</form>
		</div>
		
		<script type="text/javascript">
		function hideSearch() {
			var objSearch = $('#id_form_search');
			objSearch.removeClass('layui-col-md2');
			//objSearch.find('form[name="searchForm"]').hide();
			//objSearch.find('a[data-id="icon-to-hide"]').hide();
			//objSearch.find('a[data-id="icon-to-show"]').show();
			objSearch.find('form[name="searchForm"]').toggle();
			objSearch.find('a[data-id="icon-to-hide"]').toggle();
			objSearch.find('a[data-id="icon-to-show"]').slideToggle(200);
			
			$('#id_panel_left_grid').removeClass('layui-col-md10');
			$('#id_panel_left_grid').addClass('layui-col-md12');
		}
		function showSearch() {
			var objSearch = $('#id_form_search');
			objSearch.addClass('layui-col-md2');
			//objSearch.find('form[name="searchForm"]').show();
			//objSearch.find('a[data-id="icon-to-show"]').hide();
			//objSearch.find('a[data-id="icon-to-hide"]').show();
			objSearch.find('form[name="searchForm"]').slideToggle(200);
			objSearch.find('a[data-id="icon-to-show"]').toggle();
			objSearch.find('a[data-id="icon-to-hide"]').toggle();
			
			$('#id_panel_left_grid').removeClass('layui-col-md12');
			$('#id_panel_left_grid').addClass('layui-col-md10');
		}
		</script>
		<!-- 搜索面板【end】 -->
		
	</div>
	
	<script type="text/javascript">
	$(function() {
		console.log('浏览器的外部宽度window.outerWidth---' + window.outerWidth);
		console.log('浏览器的内部宽度window.innerWidth---' + window.innerWidth);
		console.log('浏览器的xx宽度---document.body.clientWidth---' + document.body.clientWidth);
		console.log('可视的宽度---document.body.scrollWidth---' + document.body.scrollWidth);
		console.log('浏览器的外部高度window.outerHeight---' + window.outerHeight);
		console.log('浏览器的内部高度window.innerHeight---' + window.innerHeight);
		console.log('浏览器的xx高度---document.body.clientHeight---' + document.body.clientHeight);
		console.log('可视的高度---document.body.scrollHeight---' + document.body.scrollHeight);
		$('#id_panel_left_grid').css('height', (window.innerHeight - 40) + 'px');
		$('#id_form_search').find('a[data-id="icon-to-show"]').hide();
	});
	</script>
</body>
		
</html>